﻿<%@ Page Language="C#" MasterPageFile="~/NestedMasterPage.master" %>

<asp:Content ID="Content1" ContentPlaceHolderID="NestedContent" runat="server">

    <!-- ##@#@#@#@# >> THIS PAGE IS ONLY FOR DEMO! Do not use it in project << #@#@#@#@#@##-->
    <style>
        .tempclass
        {
            overflow: hidden;
        }

            .tempclass li a
            {
                display: block;
                background: #0094ff;
                color: #fff;
                padding: 10px;
                border-radius: 10px;
                border: 1px solid #ff6a00;
                margin: 10px 9px;
            }
    </style>
    <ul class="tempclass">
        <li>
            <a id="id1" href="#">Member Login</a>
        </li>
        <li>
            <a id="id2" href="#">Outlink</a>
        </li>
        <li>
            <a id="id3" href="#">Email</a>
        </li>
        <li>
            <a id="id4" href="#">Message type 1</a>
        </li>
        <li>
            <a id="id5" href="#">Message type 2</a>
        </li>
        <li>
            <a id="id6" href="#">Message type 3</a>
        </li>
        <li>
            <a id="id7" href="#">Message type 4</a>
        </li>
        <li>
            <a id="id8" href="#">Message type 5</a>
        </li>
        <li>
            <a id="id9" href="#">Message type 6</a>
        </li>
        <li>
            <a id="id10" href="#">Message type 7</a>
        </li>
        <li>
            <a id="id11" href="#">Credit Card</a>
        </li>
    </ul>

    <div style="display: none" class="popup-content">
        <!-- Member login Start -->
        <div class="member-lightbox">
            <h4>請選擇下列其一方式登入</h4>
            <div class="liner dotted"></div>
            <div class="login-links JS-login-links">
                <a class="btn" href="#">會員登入</a>
                <a class="btn" href="#">非會員</a>
                <a class="btn" href="#">企業優惠</a>
                <a class="btn" href="#">非會員</a>
                <a class="btn" href="#">企業優惠</a>
            </div>
            <div class="tab-areas">
                <div class="area">
                    <table>
                        <tr>
                            <th>卡號 / 別名</th>
                            <td>
                                <input id="username" type="text" name="name" value="" />
                            </td>
                            <td>
                                <a href="#">忘記卡號 / 忘記別名</a>
                            </td>
                            <td class="v-a-b" rowspan="3">
                                <input class="btn fr" onclick="getName()" type="submit" name="name" value="登 入" /></td>
                        </tr>
                        <tr>
                            <th>密碼
                            </th>
                            <td>
                                <input type="password" name="name" value="" />
                            </td>
                            <td>
                                <a href="#">忘記密碼</a>
                            </td>
                        </tr>
                        <tr>
                            <td class="p-bottom" colspan="3">
                                <input type="checkbox" name="name" value="" />
                                記住我的卡號/別名
                            </td>
                        </tr>
                    </table>

                </div>
                <div class="area">
                    <table>
                        <tr>
                            <th>
                                <input type="radio" name="name" value=" " />
                                身份證字號
                            </th>
                            <td>
                                <input class="sp" type="text" name="name" value=" " /></td>
                        </tr>
                        <tr>
                            <th class="normal" colspan="2">
                                <input type="radio" name="name" value=" " />
                                不填身份證字號，直接進行結帳</th>
                        </tr>
                    </table>
                    <h4 class="notice fixed">若您未輸入身份證字號將無法獲得符合優惠活動所贈送之E-Coupon。</h4>
                    <div class="info fl">
                        <h5>邀您加入長榮會員聯誼會</h5>
                        <p>
                            您尚未加入會員嗎? 
                        </p>
                        <p>請<a class="orange-text" href="#">點選此</a> 立即加入貴賓行列</p>
                    </div>
                    <input class="btn fr" type="submit" name="name" value="確 定" />
                </div>

                <div class="area">
                    <table>
                        <tr>
                            <th>企業編號</th>
                            <td>
                                <input type="text" name="name" value="" />
                            </td>

                            <td class="v-a-b" rowspan="3">
                                <input class="btn fr" type="submit" name="name" value="登 入" />
                            </td>
                        </tr>
                        <tr>
                            <th>密碼
                            </th>
                            <td>
                                <input type="password" name="name" value="" />
                            </td>
                        </tr>
                        <tr>
                            <th colspan="2">
                                <input type="checkbox" name="name" value="">
                                記住我的企業編號
                                <a href="#" class="help margined">HELP</a>
                            </th>
                        </tr>
                    </table>
                </div>
                <div class="area">
                    <table class="shorted">
                        <tr>
                            <th>
                                <input type="checkbox" name="name" value=" " />
                                查詢訂單
                            </th>
                            <th colspan="3">
                                <input type="checkbox" name="name" value=" " />
                                E-Coupon查詢
                            </th>
                        </tr>
                    </table>
                    <table>
                        <tr>
                            <th>訂單號碼</th>
                            <td>
                                <input type="text" name="name" value=" " />
                            </td>
                        </tr>
                        <tr>
                            <th>訂購人姓名</th>
                            <td>
                                <input type="text" name="name" value=" " />
                            </td>
                        </tr>
                        <tr>
                            <th>身份證字號</th>
                            <td>
                                <input type="text" name="name" value=" " />
                            </td>
                        </tr>
                    </table>
                    <div class="info fl">
                        <h5>邀您加入長榮會員聯誼會</h5>
                        <p>
                            您尚未加入會員嗎? 
                        </p>
                        <p>請<a class="orange-text" href="#">點選此</a> 立即加入貴賓行列</p>
                    </div>
                    <input class="btn fr" type="submit" name="name" value="確 定" />
                </div>
                <div class="area">
                    <table>
                        <tr>
                            <th>訂單號碼</th>
                            <td>
                                <input type="text" name="name" value="" />
                            </td>

                            <td class="v-a-b" rowspan="3">
                                <input class="btn fr" type="submit" name="name" value="確 定" />
                            </td>
                        </tr>
                        <tr>
                            <th>訂購人姓名
                            </th>
                            <td>
                                <input type="password" name="name" value="" />
                            </td>
                        </tr>
                        <tr>
                            <th colspan="2">
                                <a href="#" class="help">HELP</a>
                            </th>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <!-- Member login End -->

        <!-- Outlink Start -->
        <div class="outlink">
            <div class="notice">
                <h4>您即將連結到長榮樂e購以外的網站。</h4>
                <input type="checkbox" name="name" value=" " />
                下次不要再提醒我
            </div>
            <div class="liner"></div>
            <div class="links">
                <a href="#" class="btn">確定前往</a>
                <a href="#" class="btn">取消前往</a>
            </div>
        </div>
        <!-- #Outlink End -->

        <!-- Email Start -->
        <div class="email">
            <h4>目前因此項商品補貨中，請填寫您的email，貨到時我們會以mail通知您。</h4>
            <div class="email-container">
                Email
                <input type="text" name="name" value=" " />
            </div>
            <div class="liner"></div>
            <div class="links">
                <a href="#" class="btn">確定</a>
            </div>
        </div>
        <!-- #Email End -->

        <!-- Message type 1 -->
        <div class="message-type1">
            <div class="notice">
                <h4>已完成!!!</h4>

            </div>
        </div>
        <!-- #Message type 1 End -->

        <!-- Message type 2 Start -->
        <div class="message-type2">
            <div class="notice">
                <h4>目前該商品補貨中，請填寫資料。</h4>
            </div>
        </div>
        <!-- #Message type 2 End -->

        <!-- Message type 3 Start -->
        <div class="message-type3">
            <div class="notice">
                <h4>您還選取了其他綠標商品兩件! 其餘兩件綠標商品將原價八折優惠售出!</h4>
            </div>
            <div class="liner"></div>
            <div class="links">
                <a href="#" class="btn">確 定</a>
                <a href="#" class="btn cancelbtn">取 消</a>
            </div>
        </div>
        <!-- #Message type 3 End -->

        <!-- Message type 4 Start -->
        <div class="message-type4">
            <div class="notice">
                <h4>您選購的商品目前補貨中，暫時無法出貨，
請點選頁面中之貨到通知。</h4>
            </div>
            <div class="liner"></div>
            <div class="links">
                <a href="#" class="btn">確 定</a>
            </div>
        </div>
        <!-- #Message type 4 End -->

        <!-- Message type 5 Start -->
        <div class="message-type5">
            <div class="notice">
                <h4>提醒您！
                    <br />
                    我們不會無故主動致電顧客，要求更改結帳方式、或詢問個人資料，
更不會要求操作ATM，若您接到可疑電話，請直接撥打<span class="orange-text">反詐騙專線
165</span>通報，或聯絡我們的<span class="orange-text">客服專線：0800-535-678</span></h4>
                <h4>感謝您。<br />
                    您的所有資料都將受到SSL認證的保護，請安心進行網路下單。
                </h4>
            </div>
            <div class="liner"></div>
            <div class="links">
                <a href="#" class="btn">確定</a>
            </div>
        </div>
        <!-- #Message type 6 End -->
        <!-- Message type 5 Start -->
        <div class="message-type6">
            <div class="notice">
                <h4>你沒有E-coupon可以選擇。</h4>
            </div>

        </div>
        <!-- #Message type 6 End -->
        <!-- Message type 7 Start -->
        <div class="message-type7">
            <h4>會員您好，您有可使用的E-coupon如下:</h4>
            <div class="light-list-table">
                <table>
                    <tr>
                        <th class="spacer"></th>
                        <th></th>
                        <th>金額 (元)</th>
                        <th>有限期限</th>
                        <th class="spacer"></th>
                    </tr>
                    <tr>
                        <td class="spacer"></td>
                        <td>
                            <input type="radio" name="name" value=" " />
                        </td>
                        <td>$ 200</td>
                        <td>20130626-20130831</td>
                        <td class="spacer"></td>
                    </tr>
                    <tr>
                        <td class="spacer"></td>
                        <td>
                            <input type="radio" name="name" value=" " />
                        </td>
                        <td>$ 200</td>
                        <td>20130626-20130831</td>
                        <td class="spacer"></td>

                    </tr>
                    <tr>
                        <td class="spacer"></td>
                        <td>
                            <input type="radio" name="name" value=" " />
                        </td>
                        <td>$ 200</td>
                        <td>20130626-20130831</td>
                        <td class="spacer"></td>

                    </tr>
                    <tr>
                        <td class="spacer"></td>
                        <td>
                            <input type="radio" name="name" value=" " />
                        </td>
                        <td>都不使用</td>
                        <td></td>
                        <td class="spacer"></td>
                    </tr>
                </table>
            </div>
            <div class="liner"></div>
            <div class="links">
                <a href="#" class="btn">確 定</a>
                <a href="#" class="btn">取 消</a>
            </div>
        </div>
        <!-- #Message type 7 End -->

        <!-- Credit Card End -->
        <div class="credit-card">
            <h4>認證碼為下列紅框標示處</h4>
            <div class="pop-image">
                <div class="border"></div>
                <img src="Images/ContentImages/CreditCard.png" />
            </div>
            <div class="liner"></div>
            <div class="links">
                <a href="#" class="btn">確 定</a>
            </div>
        </div>
        <!-- #Credit Card End -->


        <!-- ##@#@#@#@# >> THIS PAGE IS ONLY FOR DEMO  do not use it for project << #@#@#@#@#@##-->
        <script>
            function getName() {
                var myValue = $('.lightbox #username').val();
                alert(myValue);
            }
        </script>
    </div>
</asp:Content>


